<template>
  <div class="navigation">
    <div class="navigation-header">
      <div class="title">{{ datas.title }}</div>
      <div class="desc">{{ datas.desc }}</div>
    </div>
    <div class="navigation-body">
      <el-form size="small" label-width="68px">
        <div
          v-for="(item, index) in datas.form.source_list"
          :key="index"
          class="navigation-from-item border-solid-bottom"
        >
          <div class="navigation-from-item__header">
            <div class="name">导航{{ index + 1 }}</div>
            <div class="btn" @click="handleDelete(index)">删除</div>
          </div>

          <div class="navigation-from-item__body">
            <!-- 导航名称 -->
            <el-form-item label="导航名称">
              <el-input
                v-model="item.title"
                type="text"
                placeholder="请输入导航名称"
                size="small"
                maxlength="6"
                show-word-limit
              ></el-input>
            </el-form-item>

            <!-- 导航类型选择 -->
            <el-form-item label="导航类型">
              <el-radio-group v-model="item.data_type">
                <el-radio
                  v-for="type in typeOptions"
                  :key="type.label"
                  :label="type.label"
                  @change="handlerChangeDataType(item)"
                >
                  {{ type.title }}
                </el-radio>
              </el-radio-group>
            </el-form-item>

            <!-- 导航内容选择 -->
            <el-form-item v-if="item.data_type !== 0" label="导航内容">
              <el-select
                v-if="item.data_type === 1"
                v-model="item.content"
                placeholder="请选择内容"
                clearable
              >
                <el-option-group
                  v-for="group in contentOptions"
                  :key="group.title"
                  :label="group.title"
                >
                  <el-option
                    v-for="op in group.options"
                    :key="op.value"
                    :label="op.title"
                    :value="op.value"
                  />
                </el-option-group>
              </el-select>
              <el-input
                v-else
                v-model="item.content"
                type="text"
                placeholder="请输入完整链接地址"
                size="small"
              ></el-input>
            </el-form-item>

            <!-- 跳转方式选择 -->
            <el-form-item v-if="item.data_type !== 0" label="跳转方式">
              <el-radio-group v-model="item.blank">
                <el-radio
                  v-for="blank in blankOptions"
                  :key="blank.label"
                  :label="blank.label"
                >
                  {{ blank.title }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <el-divider></el-divider>
          <!-- 子导航 -->
          <nav-form-item
            :datas="item"
            :content-options="contentOptions"
          ></nav-form-item>
        </div>
      </el-form>
    </div>

    <div class="navigation__footer">
      <el-button
        type="primary"
        size="small"
        icon="el-icon-plus"
        @click="handleAdd"
      >
        添加
      </el-button>
    </div>
  </div>
</template>

<script>
import navFormItem from './components/navFormItem'

export default {
  name: 'NavigationStyle',
  components: {
    navFormItem
  },
  props: {
    datas: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      typeOptions: [
        {
          label: 1,
          title: '指定内容'
        },
        {
          label: 2,
          title: '链接'
        }
      ],
      blankOptions: [
        {
          label: 1,
          title: '当前页面打开'
        },
        {
          label: 2,
          title: '新标签页打开'
        }
      ],
      contentOptions: []
    }
  },
  created() {
    this.getContentOptions()
  },
  methods: {
    // 添加
    handleAdd() {
      const item = {
        title: '首页',
        data_type: 1,
        blank: 1,
        content: '',
        pid: 0,
        id: this.datas.form.source_list.length + 1
      }
      if (this.datas.form.source_list.length < 8) {
        this.datas.form.source_list.push(item)
      } else {
        this.$message.info('最多只能添加8个')
      }
    },

    // 删除
    handleDelete(index) {
      if (this.datas.form.source_list.length > 1) {
        this.datas.form.source_list.splice(index, 1)
      } else {
        this.$message.info('至少显示一个')
      }
    },
    // 处理更换了导航类型
    handlerChangeDataType(item) {
      item.content = ''
    },
    getContentOptions() {
      this.$http.get(
        '/admin/site/navi/top/content/options',
        {},
        ({ data }) => {
          this.contentOptions = data
        },
        _ => {}
      )
    }
  }
}
</script>

<style scoped lang="scss">
.navigation {
  padding-top: 20px;
  padding-left: 24px;
  padding-right: 34px;

  &-header {
    padding-bottom: 10px;
    border-bottom: 1px solid #ebeef5;

    .title {
      font-size: 16px;
      font-weight: 500;
      color: #303133;
      line-height: 24px;
    }

    .desc {
      margin-top: 10px;
      font-size: 12px;
      font-weight: 400;
      color: #909399;
      line-height: 16px;
    }
  }

  &-body {
    .navigation-from-item {
      padding: 20px 0;

      &.border-solid-bottom {
        border-bottom: 1px solid #ebeef5;
      }

      .el-form-item:last-child {
        margin-bottom: 0;
      }

      &__header {
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;

        .name {
          font-size: 14px;
          font-weight: 500;
          color: #303133;
          line-height: 16px;
        }

        .btn {
          font-size: 14px;
          font-weight: 400;
          color: #5191ff;
          line-height: 16px;
          cursor: pointer;
        }
      }
    }
  }

  &__footer {
    padding: 20px 0;

    .el-button--primary {
      background: #5191ff;
      border-color: #5191ff;
      display: block;
      width: 100%;
    }
  }
}
</style>
